<template>
    <!-- <page-header @handleAddClickEmit="handleAddClick"></page-header> -->
    <page-table
        :tableData="tableData"
        :tableList="tableList"
        :isselection="false"
        :isSite="false"
        @handleEditClickEmit="handleEditClick"
        @handleDleClickEmit="handleDleClickEmit"
        @handleSelectionChangeEmit="handleSelectionChange"
    >
    </page-table>
    <!-- <div class="page-pagination">
        <page-pagination @handleCurrentChangeEmit="handleCurrentChange"></page-pagination>
    </div> -->
    <!-- 抽屉 -->
    <page-drawer
        :value="drawerVisible"
        :form="formData"
        @handleCloseEdit="handleClose"
        @handleSubmitEdit="handleSubmit"
    ></page-drawer>
</template>

<script lang="ts" setup>
import PageTable from '@/components/page-table/index.vue';
import PagePagination from '@/components/page-pagination/index.vue';
import PageHeader from './cpns/page-header.vue';
import PageDrawer from './cpns/page-drawer.vue';

import { tableList, IFromData } from './global';
import { computed, onMounted, ref, reactive } from 'vue';
import useAdminStore from '@/store/system';

const adminStore = useAdminStore();

const drawerVisible = ref(false);

let formData: any = reactive({
    nickName: '',
    username: '',
    password: '',
    avatar: '',
});

let tableData = computed(() => adminStore.adminList);

onMounted(() => {
    adminStore.getAdministratorsListAction();
});

const handleClose = () => {
    drawerVisible.value = false;
};

const handleEditClick = (info: any) => {
    Object.assign(formData, info);
    setTimeout(() => {
        drawerVisible.value = true;
    }, 250);
};

const handleDleClickEmit = (info: any) => {
    console.log(info);
};

const handleSelectionChange = (list: []) => {
    console.log(list);
};

// 分页切换
const handleCurrentChange = (current: number) => {
    console.log(current);
};

// 新增打开抽屉
const handleAddClick = () => {
    // 先将 formData 置为空对象
    for (let key in formData) {
        formData[key] = '';
    }
    drawerVisible.value = true;
};

// 新增和编辑的提交
const handleSubmit = (data: IFromData) => {
    console.log(data);
};
</script>

<style scoped lang="less">
.page-pagination {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 2vh;
    // transform: translate(-50%,0);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 10vh;
    background-color: #fff;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
    border-radius: 3vh;
}
</style>
